<template>
    <div>
        <a-control-group>
            <a-label :color="props.color" :disabled="props.disabled" :size="props.size" :sharp="props.sharp">
                {{ $t("APaging.EachPage") }}
            </a-label>
            <a-input-select :color="props.color" :disabled="props.disabled" :size="props.size" :sharp="props.sharp" :items="myPageSizeItems" :value="props.pageSize" @update:value="methods.setPageSize($event)" :clearable="false" style="width: 200px"></a-input-select>
            <a-label :color="props.color" :disabled="props.disabled" :size="props.size" :sharp="props.sharp">
                {{ $t("APaging.Goto") }}
            </a-label>
            <a-input-number :color="props.color" :disabled="props.disabled" :size="props.size" :sharp="props.sharp" :value="props.pageIndex" @update:value="methods.setPageIndex($event)" :clearable="false" style="width: 200px"></a-input-number>
            <a-label :color="props.color" :disabled="props.disabled" :size="props.size" :sharp="props.sharp">
                /{{ totalPageCount }},
                {{ $t("APaging.Total", [props.totalCount]) }}</a-label>
            <a-button :color="props.color" :disabled="props.disabled" :size="props.size" :sharp="props.sharp" :square="true" @click="methods.setPageIndex(1)">
                <span class="fa fa-angle-double-left"></span>
            </a-button>
            <a-button :color="props.color" :disabled="props.disabled" :size="props.size" :sharp="props.sharp" :square="true" @click="methods.prevPage">
                <span class="fa fa-angle-left"></span>
            </a-button>
            <a-button :color="props.color" :disabled="props.disabled" :size="props.size" :sharp="props.sharp" :square="true" @click="methods.nextPage">
                <span class="fa fa-angle-right"></span>
            </a-button>
            <a-button :color="props.color" :disabled="props.disabled" :size="props.size" :sharp="props.sharp" :square="true" @click="methods.setPageIndex(totalPageCount)">
                <span class="fa fa-angle-double-right"></span>
            </a-button>
        </a-control-group>
    </div>
</template>

<script setup lang="ts">
import { ColorType, SizeType } from '@/types'
import { computed } from 'vue'
import { $t } from '@/lang'

interface PropsType {
    color?: ColorType
    disabled?: boolean
    size: SizeType
    sharp?: boolean
    pageSize?: number
    pageIndex?: number
    totalCount?: number
    pageSizeItems?: number[]
}
const props = withDefaults(defineProps<PropsType>(), {
    color: 'default',
    disabled: false,
    size: 'm',
    sharp: false,
    pageSize: 10,
    pageIndex: 1,
    totalCount: 0,
    pageSizeItems: () => [10, 20, 50, 100]
})

const totalPageCount = computed(() => {
    return Math.ceil(props.totalCount / props.pageSize)
})
const myPageSizeItems = computed(() => {
    let arr = [...props.pageSizeItems]
    arr.push(props.pageSize)
    arr = Array.from(new Set(arr))
    arr.sort((a, b) => a - b)
    return arr.map(a => {
        return {
            text: `${a}`,
            value: a
        }
    })
})

const emit = defineEmits<{
    (e: 'update:pageSize', value: number): void
    (e: 'update:pageIndex', value: number): void
}>()

const methods = {
    setPageSize(pageSize: number) {
        emit('update:pageSize', pageSize)
    },
    setPageIndex(pageIndex: number) {
        emit('update:pageIndex', pageIndex)
    },
    prevPage() {
        let pageIndex = Math.max(1, props.pageIndex - 1)
        methods.setPageIndex(pageIndex)
    },
    nextPage() {
        let pageIndex = Math.min(totalPageCount.value, props.pageIndex + 1)
        methods.setPageIndex(pageIndex)
    },
}
</script>